import {
  NConfigProvider,
  NLoadingBarProvider,
  NNotificationProvider,
  GlobalThemeOverrides,
} from 'naive-ui'
import { defineComponent, ref } from 'vue'
import { RouterView } from 'vue-router'
import { useAppStore } from './store/modules/app'

const App = defineComponent(() => {
  const appStore = useAppStore()
  const themeOverrides = ref<GlobalThemeOverrides>({
    common: {
      primaryColor: appStore.primary,
    },
  })
  return () => (
    <div class={appStore.theme.name === 'dark' ? 'dark_theme' : 'light_theme'}>
      <NConfigProvider theme={appStore.theme} themeOverrides={themeOverrides.value}>
        <NLoadingBarProvider>
          <NNotificationProvider max={3}>
            <RouterView />
          </NNotificationProvider>
        </NLoadingBarProvider>
      </NConfigProvider>
    </div>
  )
})

export default App
